import React from 'react';
import PropTypes from 'prop-types';
import { Route, Switch, Redirect } from 'react-router-dom';
import {withRouter } from 'react-router';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actions as userActions } from '../redux/modules/user';

import { Layout, notification } from 'antd';
import '../App.css';

import Header from '../nav/Header';
import Footer from '../nav/Footer';
import Breadcrumb from '../nav/Breadcrumb';

import NewMeeting from '../meeting/NewMeeting';
import JoinMeeting from '../meeting/JoinMeeting';
import MyMeeting from '../meeting/MyMeeting';
import Me from '../user/Me';

import Login from '../user/Login';
import bg from '../img/bg.png';

class RootRouter extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {
      location: this.props.location.pathname,
      lastLocation: ''
    }
  }

  render() {
    const { Content } = Layout

    if (this.props.user.get('id') === -1 && this.props.location.pathname !== '/login')
      return (<Redirect to="/login" />)
    return (
      <Layout className="layout" style={{
        background: "url(" + bg + ")",
        height: window.innerHeight
      }}>
        <Header 
          {...this.props}
        />
        <Content style={{ padding: '0 50px' }}>
        <Breadcrumb 
          {...this.props}
        />
        <div style={{ background: '#fff', padding: 24, minHeight: 572 }}>
        <Switch>
          <Route exact path="/" render={newProps => {
            return (
            <Redirect to="/new" />
          )}} />
          <Route path="/new" render={newProps => {
            return (
              <NewMeeting {...this.props} />
          )}} />
          <Route path="/join" render={newProps => {
            const s = newProps.location.search
            let code
            if(s)
              code = s.substr(s.indexOf("code=") + 5)
            return (
              <JoinMeeting code={code} />
          )}} />
          <Route path="/my" render={newProps => {
            return (
              <MyMeeting {...this.props} />
          )}} />
          <Route path="/me" render={newProps => {
            return (
              <Me {...this.props} />
          )}} />
          <Route path="/login" render={props => (
            <Login
              login={user => {
                const lastLocation = this.state.lastLocation
                this.props.login(user).then((u) => {
                  this.changeLocation(lastLocation === '/login' ? '/me' : lastLocation)
                  notification.success({
                    message: `欢迎您: ${u.name}`
                  })
                }).catch(err => notification.error({
                  message: err
                }))
                // setTimeout(() => {
                //   this.changeLocation(lastLocation === '/login' ? '/me' : lastLocation)
                // }, 200)
              }}
            />
          )} />
        </Switch>
        </div>
        </Content>
        <Footer />
      </Layout>
    )
  }

  componentDidMount = () => {
    if (this.props.user.get('id') === -1) {
      this.setState({
        lastLocation: this.state.location
      })
      if('/login' !== this.state.location)
        this.props.history.push('/login')
    }
  }

  isLogined = () => {
    return this.props.user.get('id') !== -1
  }

  changeLocation = (location) => {
    if(this.props.user.get('id') !== -1) {
      // if(location !== this.state.location)
      this.props.history.push(location)
    }
  }
}

const mapStateToProps = state => {
  return {
    user: state.get('user')
  }
}
  
const mapDispatchToProps = dispatch => {
  return {
    ...bindActionCreators(userActions, dispatch)
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RootRouter))
// export default connect(mapStateToProps, mapDispatchToProps)(RootRouter)
